
import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

const { Sider } = Layout;

const  Dashboard = () => {
  const [collapsed, setCollapsed] = useState(false);

  const onCollapse = collapsed => {
    setCollapsed(collapsed);
  };

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={onCollapse}
      style={{ height: '100%' }} // 设置侧边栏高度为屏幕高度
    >
      <div className="logo" />
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<UserOutlined />}>
          Option 1
        </Menu.Item>
        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
          Option 2
        </Menu.Item>
        <Menu.Item key="3" icon={<UploadOutlined />}>
          Option 3
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default  Dashboard;